<template>
  <div class="hello">
    <!-- 地区城市 -->
    <h1><input id="cs_btn"
             type="search"
             value=""
             placeholder="请输入地区或城市名" /><button @click="Onchengshi">搜索</button></h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      chengshi: ''
    }
  },
  methods: {
    Onchengshi () {
      this.chengshi = document.getElementById("cs_btn").value
      if (this.chengshi == null || this.chengshi == "") {
        this.$message({
          showClose: true,
          message: '请输入正确的地址！！！',
          type: 'error'
        });
      } else {
        this.$emit('chengshi', this.chengshi)
      }

    }
  },

}
</script>


<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}

.hello {
  width: 100%;
  height: 60px;
  text-align: center;
}
.hello > h1 {
  width: 100%;
  height: 10%;
  display: inline-block;
  line-height: 60px;
}
#cs_btn {
  outline: none;
  padding-left: 10px;
  margin: 0;
  height: 40px;
  border-radius: 20px 0 0 20px;
}
.hello > h1 > button {
  outline: none;
  padding: 0;
  margin: 0;
  height: 40px;
  width: 60px;
  border-radius: 0 20px 20px 0;
}
</style>
